<template>
    <div>
        <div v-for="item in fuseList" :key="item" :class="item"></div>
    </div>
</template>

<script>
export default {
    name:'Fuse',
    data(){
        return{
            fuseList:['fuse1 position_box','fuse2 position_box','fuse3 position_box','fuse4 position_box','fuse5 position_box'
            ,'fuse6 position_box','fuse7 position_box','fuse8 position_box','fuse9 position_box','fuse10 position_box','fuse11 position_box',
            'fuse12 position_box','fuse13 position_box']
        }
    }
}
</script>

<style scoped>
.fuse1{
    width:10.78125vw ;
    height: 15.729166666666666vw;
    top: 20.260416666666668vw;
    left:3.6458333333333335vw ;
    background: url('../../assets/img/fuse1.png');
}
.fuse2{
width:1.640625vw;
height:21.302083333333332vw;
top:17.473958333333332vw;
left:15.989583333333332vw;
    background: url('../../assets/img/fuse2.png');
}
.fuse3{
width:9.453125vw;
height:2.083333333333333vw;
top:12.760416666666666vw;
left:23.489583333333332vw;
    background: url('../../assets/img/fuse3.png');
}
.fuse4{
width:17.65625vw;
height:11.015625vw;
top:19.296875vw;
left:20.911458333333332vw;
    background: url('../../assets/img/fuse4.png');
}
.fuse5{
    width:9.453125vw;
height:2.083333333333333vw;
top:34.27395833333333vw;
left:23.489583333333332vw;
    background: url('../../assets/img/fuse5.png');
}
.fuse6{
width:26.927083333333336vw;
height:11.640625vw;
top:38.671875vw;
left:19.375vw;
    background: url('../../assets/img/fuse6.png');
}
@keyframes active_box{
    0%{
        transform: translateY(-0.4vw);
    }
    40%{
        transform: translateY(0.5vw);
    }
    50%{
        transform: translateY(0.6vw);
    }
    90%{
        transform: translateY(-0.5vw);
    }
    100%{
        transform: translateY(-0.4vw);
    }
}
.fuse7{
width:11.927083333333334vw;
height:8.59375vw;
top:22.395833333333336vw;
left:41.614583333333336vw;
    background: url('../../assets/img/fuse7.png');
         animation-name: active_box;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
}
.fuse8{
width:11.297135416666666vw;
height:2.083333333333333vw;
top:12.760416666666666vw;
left:60.546875vw;
    background: url('../../assets/img/fuse8.png');
}
.fuse9{
   width:28.4375vw;
height:12.395833333333334vw;
top:17.265625vw;
left:53.02083333333333vw;
    background: url('../../assets/img/fuse9.png');
}
.fuse10{
    width:11.297135416666666vw;
height:2.083333333333333vw;
top:34.27395833333333vw;
left:60.546875vw;
    background: url('../../assets/img/fuse10.png');
}
.fuse11{
    width:32.369791666666664vw;
height:8.046875vw;
top:39.6875vw;
left:49.34895833333333vw;
    background: url('../../assets/img/fuse11.png');
}
.fuse12{
width:1.640625vw;
height:21.302083333333332vw;
top:17.473958333333332vw;
left:83.69791666666667vw;
    background: url('../../assets/img/fuse2.png');
}
.fuse13{
width:10.78125vw;
height:16.432291666666668vw;
top:19.921875vw;
left:86.58854166666666vw;
    background: url('../../assets/img/fuse12.png');
}




.position_box{
    position: absolute;
    background-size: 100% 100%;
}
</style>